<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50 py-8">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
      <!-- Header -->
      <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-4">
          <span class="text-gradient">文本转拼音</span>
        </h1>
        <p class="text-lg text-gray-600">
          将中文文本转换为拼音，支持多种输出格式
        </p>
      </div>

      <!-- Tool Container -->
      <div class="bg-white rounded-xl shadow-lg p-6">
        <!-- Options -->
        <div class="mb-6">
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">拼音格式</label>
              <select v-model="pinyinFormat" class="input-field">
                <option value="normal">普通格式 (nǐ hǎo)</option>
                <option value="toneNumber">数字声调 (ni3 hao3)</option>
                <option value="toneNone">无声调 (ni hao)</option>
                <option value="firstLetter">首字母 (n h)</option>
              </select>
            </div>
            
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">分隔符</label>
              <select v-model="separator" class="input-field">
                <option value=" ">空格</option>
                <option value="">无分隔</option>
                <option value="-">连字符 (-)</option>
                <option value="_">下划线 (_)</option>
              </select>
            </div>
            
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">大小写</label>
              <select v-model="letterCase" class="input-field">
                <option value="lowercase">小写</option>
                <option value="uppercase">大写</option>
                <option value="capitalize">首字母大写</option>
              </select>
            </div>
          </div>
        </div>

        <!-- Input Area -->
        <div class="mb-6">
          <label class="block text-sm font-medium text-gray-700 mb-2">
            输入中文文本
          </label>
          <textarea
            v-model="inputText"
            placeholder="请输入要转换的中文文本..."
            class="textarea-field h-32"
            @input="convertToPinyin"
          ></textarea>
          <div class="mt-2 text-sm text-gray-500">
            字符数: {{ inputText.length }}
          </div>
        </div>

        <!-- Output Area -->
        <div class="mb-6">
          <label class="block text-sm font-medium text-gray-700 mb-2">
            拼音结果
          </label>
          <textarea
            v-model="outputText"
            readonly
            class="textarea-field h-32 bg-gray-50"
            placeholder="转换后的拼音将显示在这里..."
          ></textarea>
          <div class="mt-2 flex justify-between items-center">
            <span class="text-sm text-gray-500">
              字符数: {{ outputText.length }}
            </span>
            <button
              @click="copyToClipboard"
              class="secondary-button text-sm py-2 px-4"
              :disabled="!outputText"
            >
              {{ copied ? '已复制' : '复制结果' }}
            </button>
          </div>
        </div>

        <!-- Action Buttons -->
        <div class="flex flex-wrap gap-3">
          <button @click="convertToPinyin" class="primary-button" :disabled="!inputText">
            转换拼音
          </button>
          <button @click="clearAll" class="secondary-button">
            清空内容
          </button>
          <button @click="loadSample" class="secondary-button">
            加载示例
          </button>
        </div>
      </div>

      <!-- Instructions -->
      <div class="mt-8 bg-white rounded-xl shadow-lg p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">使用说明</h3>
        <ul class="space-y-2 text-gray-600">
          <li>• 在上方文本框中输入中文内容</li>
          <li>• 选择拼音格式、分隔符和大小写选项</li>
          <li>• 点击"转换拼音"按钮或自动实时转换</li>
          <li>• 使用"复制结果"按钮快速复制转换后的拼音</li>
          <li>• 支持多音字，系统会自动选择最合适的读音</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'



const inputText = ref('')
const outputText = ref('')
const pinyinFormat = ref('normal')
const separator = ref(' ')
const letterCase = ref('lowercase')
const copied = ref(false)

// 简单的拼音转换实现（实际项目中可以使用更完整的拼音库）
const convertToPinyin = () => {
  if (!inputText.value.trim()) {
    outputText.value = ''
    return
  }

  // 这里使用简化的拼音转换逻辑
  // 实际项目中应该使用完整的拼音库如 pinyin-pro
  const result = simulatePinyinConversion(inputText.value)
  outputText.value = result
}

// 模拟拼音转换（简化版本）
const simulatePinyinConversion = (text) => {
  // 简单的汉字到拼音映射（实际项目中应使用完整的拼音库）
  const pinyinMap = {
    '你': 'nǐ', '好': 'hǎo', '世': 'shì', '界': 'jiè',
    '中': 'zhōng', '国': 'guó', '人': 'rén', '民': 'mín',
    '学': 'xué', '习': 'xí', '工': 'gōng', '作': 'zuò',
    '生': 'shēng', '活': 'huó', '爱': 'ài', '情': 'qíng',
    '时': 'shí', '间': 'jiān', '空': 'kōng', '气': 'qì'
  }

  let result = ''
  for (let char of text) {
    if (pinyinMap[char]) {
      let pinyin = pinyinMap[char]
      
      // 根据格式选项处理拼音
      if (pinyinFormat.value === 'toneNumber') {
        pinyin = convertToToneNumber(pinyin)
      } else if (pinyinFormat.value === 'toneNone') {
        pinyin = pinyin.replace(/[āáǎàēéěèīíǐìōóǒòūúǔùǖǘǚǜ]/g, match => {
          const toneMap = { 'ā': 'a', 'á': 'a', 'ǎ': 'a', 'à': 'a', 'ē': 'e', 'é': 'e', 'ě': 'e', 'è': 'e' }
          return toneMap[match] || match.replace(/[āáǎàēéěèīíǐìōóǒòūúǔùǖǘǚǜ]/g, c => {
            return c.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
          })
        })
      } else if (pinyinFormat.value === 'firstLetter') {
        pinyin = pinyin[0]
      }
      
      // 处理大小写
      if (letterCase.value === 'uppercase') {
        pinyin = pinyin.toUpperCase()
      } else if (letterCase.value === 'capitalize') {
        pinyin = pinyin.charAt(0).toUpperCase() + pinyin.slice(1)
      }
      
      result += pinyin + separator.value
    } else {
      // 非汉字字符直接添加
      result += char + separator.value
    }
  }
  
  // 移除末尾的分隔符
  if (separator.value && result.endsWith(separator.value)) {
    result = result.slice(0, -separator.value.length)
  }
  
  return result
}

// 将带声调的拼音转换为数字声调
const convertToToneNumber = (pinyin) => {
  const toneMap = {
    'ā': ['a', 1], 'á': ['a', 2], 'ǎ': ['a', 3], 'à': ['a', 4],
    'ē': ['e', 1], 'é': ['e', 2], 'ě': ['e', 3], 'è': ['e', 4],
    'ī': ['i', 1], 'í': ['i', 2], 'ǐ': ['i', 3], 'ì': ['i', 4],
    'ō': ['o', 1], 'ó': ['o', 2], 'ǒ': ['o', 3], 'ò': ['o', 4],
    'ū': ['u', 1], 'ú': ['u', 2], 'ǔ': ['u', 3], 'ù': ['u', 4],
    'ǖ': ['ü', 1], 'ǘ': ['ü', 2], 'ǚ': ['ü', 3], 'ǜ': ['ü', 4]
  }
  
  let result = pinyin
  for (let [toneChar, [baseChar, tone]] of Object.entries(toneMap)) {
    result = result.replace(new RegExp(toneChar, 'g'), baseChar + tone)
  }
  
  return result
}

const copyToClipboard = async () => {
  if (!outputText.value) return
  
  try {
    await navigator.clipboard.writeText(outputText.value)
    copied.value = true
    setTimeout(() => {
      copied.value = false
    }, 2000)
  } catch (err) {
  }
}

const clearAll = () => {
  inputText.value = ''
  outputText.value = ''
}

const loadSample = () => {
  inputText.value = '你好世界，这是一个示例文本。'
  convertToPinyin()
}

// 监听选项变化，自动重新转换
watch([pinyinFormat, separator, letterCase], () => {
  if (inputText.value) {
    convertToPinyin()
  }
})

// SEO
useHead({
  title: '文本转拼音 - 八八在线工具',
  meta: [
    { name: 'description', content: '在线中文转拼音工具，支持多种拼音格式、分隔符和大小写选项，实时转换，无需注册' },
    { property: 'og:title', content: '文本转拼音 - 八八在线工具' },
    { property: 'og:description', content: '在线中文转拼音工具，支持多种拼音格式、分隔符和大小写选项' }
  ]
})
</script>